/*调用添加类名函数更改菜谱盒子里八个小盒子的样式 */

/* Begin */
//菜谱轮播区域 最热
let menu_box_listone = document.getElementById("menu_box_listone");
let menu_box_list_styleone = menu_box_listone.children;
navshare(menu_box_list_styleone,7,"menu_littlebox","menu_littlebox"+" "+"on","menu_littlebox");
// 菜谱轮播区域 一小时
let menu_box_listtwo = document.getElementById("menu_box_listtwo");
let menu_box_list_styletwo = menu_box_listtwo.children;
navshare(menu_box_list_styletwo,7,"menu_littlebox","menu_littlebox"+" "+"on","menu_littlebox");
// //菜谱轮播区域 今天
let menu_box_listthree = document.getElementById("menu_box_listthree");
let menu_box_list_stylethree = menu_box_listthree.children;
navshare(menu_box_list_stylethree,7,"menu_littlebox","menu_littlebox"+" "+"on","menu_littlebox");
// //菜谱轮播区域 七天
let menu_box_listfour = document.getElementById("menu_box_listfour");
let menu_box_list_stylefour = menu_box_listfour.children;
navshare(menu_box_list_stylefour,7,"menu_littlebox","menu_littlebox"+" "+"on","menu_littlebox");
/* GND */

// 自动轮播
let menu_box = document.getElementsByClassName("menu_box");
let menubtnL = document.getElementById("menubtnLeft");
let menubtnR = document.getElementById("menubtnRight");
let pots = document.getElementsByClassName("pot");
let menu_wrapper = document.getElementById("menu_wrapper");
//menuindex表示第几个盒子在展示
let menuindex = 0;
//存储时间
let times;
let clearPics = ()=> {
    //全部去掉active类名
    for (let i = 0 ; i < menu_box.length ; i++){
        menu_box[i].className = "menu_box"
    }
    for (let i = 0 ; i < pots.length ; i++){
        pots[i].className = "pot"
    }
};
let update = ()=> {
    clearPics();
    //，第menuindex个盒子有active类名
    menu_box[menuindex].className = "menu_box active";
    pots[menuindex].className = "pot active";
};
//声明一个变量，每当执行一次menubtnNext函数变切换下一个盒子并且添加active类名，当盒子是最后一个时，下次切换回到初始盒子
let menubtnNext = ()=> {
  menuindex ++;
  if(menuindex === 4){
      menuindex = 0;
  }
  //执行update()方法给盒子添加active类名
  update();
};
//声明一个变量，每当执行一次menubtnText函数便切换上一个盒子并且添加active类名，当盒子是最后一个时，下次切换回到初始盒子
let menubtnText = ()=> {
    if (menuindex === 0){
        menuindex = 3
    }else {
        menuindex --;
    }
    //执行update()方法给盒子添加active类名
    update();
};
//默认开启定时器每五秒钟切换下一个盒子
times=setInterval( ()=> {
    menubtnNext();
},5000);
//鼠标移入盒子关闭定时器
menu_wrapper.onmouseover =  ()=> {
    clearInterval(times);
};
//鼠标移出盒子开启定时器，继续执行默认操作
menu_wrapper.onmouseout = ()=> {
    times=setInterval( ()=> {
        //每点击一次就调用一次menubtnNext函数
        menubtnNext();
    },5000);
};
//给右键按钮绑定点击事件
menubtnR.onclick = ()=> {
    //每点击一次就调用一次menubtnNext函数
    // alert("绑定成功 右");
    menubtnNext();
};
//给左键按钮绑定点击事件
menubtnL.onclick = ()=> {
    // alert("绑定成功 左");
    //每点击一次，就要调用一次menubtnText()函数
    menubtnText();
};
//先遍历所有的点给一个点添加点击事件
for (let i=0; i<pots.length; i++){
    //这里因为需要用到this 所以就没用箭头函数
    pots[i].onclick = function() {
        //声明一个变量用来存储当前的点是哪一位(在html里面给标签存入数据,获取自定义属性)
        let index = this.getAttribute("arr");
        //让把当前点击的点值跟menuindex相等，这样就是保证当点击点的时候跳转到对应的盒子
        menuindex = index;
        update();
    }
}

